<template>
	<view class="load" v-if="!load">
		<u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
	</view>
	<view v-else style="height: 100vh; overflow: hidden">
		<view style="height: 100%; overflow: auto">
			<view>
				<view class="page_top" id="navBox" :style="{
					'background': topNav ? '#eceff9' : 'transparent',
					'z-index': 199,
				}">
					<top-status id="navTime"></top-status>
					<view class="tabs" :style="{
						'background': topNav ? '#eceff9' : 'transparent',
						'z-index': 199,
					}">
						{{ topNav ? '我的' : '' }}
					</view>
				</view>
				<view class="bg">
					<image src="https://mg-print.oss-cn-shenzhen.aliyuncs.com/img/my_bg.png" mode="aspectFill"></image>
				</view>
			</view>
			<view :style="{ height: navHeight + navTime + 'px' }"></view>
			<view class="wap">
				<view class="user_info">
					<view class="cover">
						<!-- <image class="userimg" src="https://mg-print.oss-cn-shenzhen.aliyuncs.com/img/user.png" ></image> -->
						<image class="userimg" :src="user.HeadImgUrl" mode="aspectFill"
							@click="toPage('/pages/otherPage/settingInfo')" />
					</view>
					<view class="info">
						<view class="info_box">
							<view class="name">
								<view class="f1 c1 f1 c1 name_text u-line-1"
									@click="toPage('/pages/otherPage/settingInfo')">{{ user.Name }}</view>
							</view>
							<image class="edit" src="https://mg-print.oss-cn-shenzhen.aliyuncs.com/img/edit.png" mode=""
								@click="toPage('/pages/otherPage/settingInfo')"></image>
						</view>
						<!-- <view class="info_btn">
							<view class="btn_cell" @click="management">
								<image src="https://mg-print.oss-cn-shenzhen.aliyuncs.com/img/business.png" mode=""></image> 商家管理
							</view>
						</view> -->
						<view class="tagBox" v-if="user.IsActivation">
							<view class="tagCell">商家</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 会员卡模块 -->
			<!-- <view class="member" @click="toMember">
				<image src="https://mg-print.oss-cn-shenzhen.aliyuncs.com/img/hd.png" mode=""></image>
				<text>开通会员，打印优惠享不停</text>
				<view class="right_button">
					立即开通
				</view>
			</view> -->
			<!-- 菜单模块 -->
			<view class="menu">
				<!-- <view class="menu_item mgb member_bg" @click="toPage('/pages/otherPage/applyMember')">
					<image class="bg_img" src="https://mg-print.oss-cn-shenzhen.aliyuncs.com/img/memberShip.png" mode=""></image>
					<view class="left">
						<image class="icon" src="https://mg-print.oss-cn-shenzhen.aliyuncs.com/img/order.png" mode=""></image>
						<text>我的订单</text>
					</view>
					<view class="right  right_button">
						<text>立即开通</text>
						<image class="arr2" src="https://mg-print.oss-cn-shenzhen.aliyuncs.com/img/arror_right.png" mode=""></image>
					</view>
				</view> -->
				<!-- <view class="menu_item mgb" @click="management">
					<view class="left">
						<image class="icon" src="https://mg-print.oss-cn-shenzhen.aliyuncs.com/img/business.png"
							mode=""></image>
						<text>商家管理</text>
					</view>
					<view class="right">
						<image class="arr" src="https://mg-print.oss-cn-shenzhen.aliyuncs.com/img/arr_right_gray.png"
							mode=""></image>
					</view>
				</view> -->
				<!-- <view class="order menu_item mgb" >
					<view class="order_view">
						<text>待打印:</text>				
					</view>
					<view class="order_view">
						<text>已完成:</text>			
					</view>
				</view> -->
				<view class="menu_item mgb" style="flex-direction: column;">
					<view class="left" style="display: flex; justify-content: space-between;"
						@click="toPage('/pages/otherPage/myOrder?type=All')">
						<view class="left">
							<image class="icon" src="https://mg-print.oss-cn-shenzhen.aliyuncs.com/img/order.png"
								mode="widthFix">
							</image>
							<text>我的订单</text>
						</view>
						<view class="right">
							<image class="arr"
								src="https://mg-print.oss-cn-shenzhen.aliyuncs.com/img/arr_right_gray.png" mode="">
							</image>
						</view>
					</view>
					<view class="order menu_item ">
						<view class="order_view" @click="toPage('/pages/otherPage/myOrder?type=PExecution')">
							<text>待打印：{{ printObj.Daidaying || 0 }}</text>
						</view>
						<view class="order_view" @click="toPage('/pages/otherPage/myOrder?type=Paid')">
							<text>已打印：{{ printObj.Yiwangcheng || 0 }}</text>
						</view>
					</view>
				</view>
				<!-- <view class="menu_item mgb" @click="toPage('/pages/otherPage/membershipCard')">
					<view class="left">
						<image class="icon" src="https://mg-print.oss-cn-shenzhen.aliyuncs.com/img/vip.png" mode=""></image>
						<text>会员卡</text>
					</view>
					<view class="right">
						<text class="tags">2张</text>
						<image class="arr" src="https://mg-print.oss-cn-shenzhen.aliyuncs.com/img/arr_right_gray.png" mode=""></image>
					</view>
				</view> -->
				<view class="bor">
					<view class="menu_item" @click="toPage('/pages/otherPage/myLibrary')">
						<view class="left">
							<image class="icon" src="https://mg-print.oss-cn-shenzhen.aliyuncs.com/img/library.png"
								mode=""></image>
						</view>
						<view class="right" style="flex: 1;">
							<text>我的文库</text>
							<image class="arr"
								src="https://mg-print.oss-cn-shenzhen.aliyuncs.com/img/arr_right_gray.png" mode="">
							</image>
						</view>
					</view>
					<!-- <view class="menu_item botoom">
						<view class="left">
							<image class="icon" src="https://mg-print.oss-cn-shenzhen.aliyuncs.com/img/service.png" mode=""></image>
						</view>
						<view class="right">
							<text>服务中心</text>
							<image class="arr" src="https://mg-print.oss-cn-shenzhen.aliyuncs.com/img/arr_right_gray.png" mode=""></image>
						</view>
					</view> -->
					<!-- <view class="menu_item " @click="toPage('/pages/otherPage/joinUs')">
						<view class="left">
							<image class="icon" src="https://mg-print.oss-cn-shenzhen.aliyuncs.com/img/join.png"
								mode=""></image>
						</view>
						<view class="right" style="flex: 1;">
							<text>申请入驻</text>
							<image class="arr"
								src="https://mg-print.oss-cn-shenzhen.aliyuncs.com/img/arr_right_gray.png" mode="">
							</image>
						</view>
					</view> -->
					<view class="menu_item" @click="toTutorial">
						<view class="left">
							<image class="icon" src="https://mg-print.oss-cn-shenzhen.aliyuncs.com/img/tutorial.png"
								mode=""></image>
							<text>新手教程</text>
						</view>
						<view class="right">
							<image class="arr"
								src="https://mg-print.oss-cn-shenzhen.aliyuncs.com/img/arr_right_gray.png" mode="">
							</image>
						</view>
					</view>
					<view class="menu_item" @click="nav_to('/pages/otherPage/ImproveInformation')">
						<view class="left">
							<image class="icon"
								src="https://mg-print.oss-cn-shenzhen.aliyuncs.com/upload/1729495411124143.png" mode="">
							</image>
							<text>开通账号</text>
						</view>
						<view class="right">
							<image class="arr"
								src="https://mg-print.oss-cn-shenzhen.aliyuncs.com/img/arr_right_gray.png" mode="">
							</image>
						</view>
					</view>
					<view class="menu_item" @click="management" v-if="user.IsActivation">
						<view class="left diyInvite">
							<image class="icon" src="https://mg-print.oss-cn-shenzhen.aliyuncs.com/img/shop_img.png"
								mode=""></image>
							<text>商家管理</text>
						</view>
						<view class="right">
							<image class="arr"
								src="https://mg-print.oss-cn-shenzhen.aliyuncs.com/img/arr_right_gray.png" mode="">
							</image>
						</view>
					</view>
					<view class="menu_item" @click="nav_to('/pages/otherPage/spread')" v-if="user.IsActivation">
						<view class="left">
							<image class="icon"
								src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/17183524967981319.png"
								mode=""></image>
							<text>我的推广</text>
						</view>
						<view class="right">
							<image class="arr"
								src="https://mg-print.oss-cn-shenzhen.aliyuncs.com/img/arr_right_gray.png" mode="">
							</image>
						</view>
					</view>
					<view class="menu_item" @click="nav_to('/pages/otherPage/merchantManagement')" v-if="user.IsAdmin">
						<view class="left">
							<image class="icon" src="https://mg-print.oss-cn-shenzhen.aliyuncs.com/img/statistics.png"
								mode=""></image>
							<text>数据报表</text>
						</view>
						<view class="right">
							<image class="arr"
								src="https://mg-print.oss-cn-shenzhen.aliyuncs.com/img/arr_right_gray.png" mode="">
							</image>
						</view>
					</view>
				</view>
				<view class="phone">
					<text class="number">客服电话：</text><text class="number"
						@click="telFun('020-87596695')">020-87596695</text>
				</view>
			</view>
		</view>
		<u-popup :show="show" mode="center" :safeAreaInsetBottom="false" :round="10" @close="closeShow">
			<view class="login-container">
				<view
					style="text-align: center; margin-bottom: 30rpx; font-weight: bold;font-size: 36rpx;color: #333333;">
					登录绑定
				</view>

				<view class="login-box">
					<view class="input-group">
						<text class="label">用户名</text>
						<input class="input" v-model="userName" placeholder="请输入用户名" />
					</view>
					<view class="input-group">
						<text class="label">密码</text>
						<input class="input" v-model="password" type="password" placeholder="请输入密码" />
					</view>
					<view class="button" @click="login">绑定</view>
					<view class="button cancel" @click="closeShow">取消</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
const {
	safeArea,
	windowHeight
} = uni.getSystemInfoSync();
import topStatus from '@/components/topStatus/topStatus.vue';
export default {
	tabTop: 0,
	components: {
		topStatus,
	},
	data() {
		return {
			userName: '',
			password: '',
			show: false,
			topNav: false,
			load: false,
			user: {
				IsAuth: 0,
			},
			ossPath: null,
			height: '',
			navHeight: '',
			navTime: '',
			unReadNum: 0,
			listUnReadNum: [],
			isShop: false,
			printObj: ''
		};
	},
	computed: {},
	onLoad() {
		this.$nextTick(async () => {
			const h = await this.getHeight('#navBox');
			this.navHeight = h - 3;
			this.navTime = await this.getHeight('#navTime');
			this.height = windowHeight - h - 40;
		});
		this.load = true;
		this.ossPath = this.$ossPath;

		// this.getMyCount();
	},
	onReady() { },
	onShow() {
		this.getUserInfo();
		this.getOrderList()
		// this.IsShopManage()
		// this.getMyListCount()
	},

	methods: {
		// login() {
		// 	console.log(321);
		// 	let _this = this;
		// 	uni.login({
		// 		provider: 'weixin',
		// 		success: res => {
		// 			_this.wxLogin(res.code);
		// 		},
		// 		fail: err => {
		// 			uni.showModal({
		// 				content: '登录失败',
		// 				showCancel: false
		// 			});
		// 		}
		// 	});
		// },
		// wxLogin(code) {
		// 	console.log('微信code', code);
		// },
		closeShow() {
			this.show = false
			this.userName = ''
			this.password = ''
		},
		toTutorial() {
			uni.navigateTo({
				url: `/pages/otherPage/tutorial`
			})
		},
		async login() {
			if (!this.userName || !this.password) {
				uni.showToast({
					title: `请输入补全信息`,
					icon: 'none'
				})
				return
			}
			let res = await this.$api.post('MLogin/MerchantLogin', {
				username: this.userName,
				password: this.password
			})
			// console.log(res);
			// console.log(res.data);
			// console.log(res.data.msg);
			if (res?.code == 0) {
				this.$pv.msg('登录成功');
				this.show = false
				this.password = ''
				this.userName = ''
				if (res?.data?.Type == 'Agent' || res?.data?.ShopID != 0) {
					this.nav_to('/pages/otherPage/manage')
				} else {
					this.nav_to('/pages/otherPage/ImproveInformation')
				}

				uni.setStorageSync('guid', res.data.Guid)
			} else {
				this.$pv.msg(res?.message || '登录失败');
			}
			console.log(res);

		},
		toPage(url) {

			uni.navigateTo({
				url: `${url}`
			})
		},
		async IsShopManage() {
			let res = await this.$api.post('/Shops/IsShopManage')
			this.isShop = res.data || false
		},
		async getUserInfo() {
			let res = await this.$api.post('/User/GetUserInfo', {
				ID: uni.getStorageSync('user').UserID
			});
			this.user = res.data;
			if (res?.data) {
				uni.setStorageSync('user', res?.data)
			}
		},
		async getMyCount() {
			for (var i = 0; i < this.myOrder.length; i++) {
				if (i == 1 || i == 2 || i == 3) {
					this.myOrder[i].count = await this.getUnread(this.myOrder[i].index);
				}
			}
		},
		async getMyListCount() {
			let res = await this.$api.post('/Member/GetUserData')
			// this.myUser.forEach((item,index)=>{

			// })
			let con = res.data
			this.myUser[0].count = con.CustomerNum
			this.myUser[1].count = con.PendingPayOrderNum
		},
		async getUnread(Status) {
			let res = await this.$api.post('/Order/MyOrders', {
				PageIndex: 1,
				PageSize: 999,
				Status,
			});
			return res.data.length || 0;
		},
		getHeight(id) {
			return new Promise((resolve) => {
				let query = uni.createSelectorQuery().in(this);
				query.select(id).boundingClientRect();
				query.exec((res) => {
					resolve(res[0].height);
				});
			});
		},
		async management() {
			uni.showLoading({
				title: '加载中'
			});
			let res = await this.$api.post('MLogin/GetShops')
			if (res?.data.length > 0) {
				this.toPage('/pages/otherPage/manage')
			} else {
				this.show = true
			}
			uni.hideLoading();
			console.log(res);


		},
		telFun(tel) {
			uni.makePhoneCall({
				phoneNumber: tel,
				success() {
					console.log('拨号成功');
				},
				fail(err) {
					console.error('拨号失败:', err);
				},
			});
		},
		goNextPath(item) {
			if (item.ispath) {
				this.nav_to(item.goto);
			} else if (item.Name == '联系客服') {
				this.telFun(item.goto)
			}
		},
		// 跳转我的订单页面
		goOrder(item) {
			this.nav_to(`/pages/order/orderList?index=${item.index}`);
		},
		toMember() {
			uni.navigateTo({
				url: `/pages/otherPage/applyMember`
			})
		},
		async getOrderList() {
			let res = await this.$api.post('MLogin/GetUserPrintOrderSum')
			this.printObj = res.data
		}
	},
};
</script>
<style>
page {
	background-color: #f1f4f9;
}
</style>

<style lang="scss" scoped>
.phone {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 40rpx;
	position: fixed;
	bottom: 14rpx;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;

	.number {
		color: #55aaff;
	}
}

.order {
	display: flex;
	// height: 200rpx;
	justify-content: space-between;
	padding: 20rpx 0 !important;
	padding-bottom: 0 !important;
	margin-top: 10rpx;

	.order_view {
		width: 48%;
		height: 100%;
		justify-content: center;
		// align-items: center;
		font-size: 35rpx;
		display: flex;

		text {
			font-size: 30rpx;
		}

	}
}

// 登录框容器
.login-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 548rpx;
	height: 620rpx;
	background: #FFFFFF;
	border-radius: 24rpx;
}

// 登录框
.login-box {
	width: 90%;
	max-width: 600rpx;
	border-radius: 10rpx;
	// box-shadow: 0rpx 4rpx 10rpx rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: column;
	align-items: center;
}

// 标签
.label {
	width: 100%;
	font-size: 28rpx;
	color: #333;
	margin-bottom: 8rpx;
	text-align: left;
}

// 输入框容器
.input-group {
	width: 100%;
	margin-bottom: 20rpx;
	display: flex;
	flex-direction: column;
}

// 输入框
.input {
	width: 100%;
	height: 60rpx;
	border: 1rpx solid #ddd;
	border-radius: 5rpx;
	font-size: 28rpx;
	color: #333;
}

// 按钮
.button {
	width: 468rpx;
	height: 80rpx;
	background: #3572FE;
	border-radius: 8rpx;
	border: none;
	color: #ffffff;
	font-size: 28rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	margin-top: 20rpx;
}

.cancel {
	background-color: white;
	margin-top: 30rpx;
	font-size: 28rpx;
	color: #999999;
}






.member_bg {
	position: relative;
}

.bg_img {
	width: 100%;
	height: 100%;
	position: absolute;
	right: 0;
}

.right_button {
	background: linear-gradient(130deg, #FBE7C8 0%, #D1AD79 100%);
	box-sizing: content-box;
	padding: 10rpx 20rpx;
	font-size: 24rpx;
	border-radius: 50rpx;
	color: white;
	position: relative;
	color: #543C24;
}

.tags {
	font-weight: 500;
	font-size: 28rpx;
	color: #FF460B;
	margin-right: 8rpx;
}

.mgb {
	margin-bottom: 20rpx;
}


.bor {
	.menu_item {
		border-radius: 0;

		&:nth-child(1) {
			border-radius: 16rpx 16rpx 0 0;
		}

		&:nth-last-child(1) {
			border-radius: 0 0 16rpx 16rpx;
		}
	}
}

.menu {
	box-sizing: border-box;
	padding: 0 32rpx;
	margin-top: 48rpx;
}


.menu_item {
	.icon {
		width: 48rpx;
		height: 48rpx;
		margin-right: 24rpx;
	}

	.arr {
		width: 32rpx;
		height: 32rpx;
	}

	.arr2 {
		width: 16rpx;
		height: 16rpx;
	}

	// height: 112rpx;
	display: flex;
	// align-items: center;
	box-sizing: border-box;
	padding: 32rpx;
	background-color: #fff;
	justify-content: space-between;
	width: 100%;
	border-radius: 16rpx;

	.left {
		display: flex;
		align-items: center;

	}

	.diyInvite {
		position: relative;

		&::after {
			content: '商家后台入口';
			position: absolute;
			right: -170rpx;
			top: -20rpx;
			background-color: #FC6701;
			font-size: 22rpx;
			color: white;
			padding: 5rpx 15rpx;
			border-radius: 25rpx 25rpx 25rpx 0;
		}
	}

	.right {
		display: flex;
		align-items: center;
		justify-content: space-between;

	}


}

.botoom {
	padding: 0;

	.left {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 32rpx 0 32rpx 32rpx;
	}

	.right {
		display: flex;
		align-items: center;
		// justify-content: center;
		box-sizing: border-box;
		padding: 32rpx 32rpx 32rpx 0;
		border-bottom: 1rpx solid #f2f2f2;
		flex: 1;
		justify-content: space-between;
	}
}

page {
	background-color: #f3f5f9;
}

.nav_item_icon {
	margin-right: 20rpx;
}

button {
	text-align: left !important;
	height: 40rpx;
	display: flex;
	align-items: center;
	background-color: transparent;
}

button::after {
	border-radius: 0 !important;
	border: 0 !important;
}

.f2 {
	font-size: 34rpx;
}

.f1 {
	font-size: 34rpx;
}

.user_info {
	padding-top: 44rpx;
	display: flex;

	.cover {
		flex-shrink: 0;
		height: 112rpx;
		width: 112rpx;
		margin-right: 10rpx;
		position: relative;

		// margin-left: 26rpx;
		.userimg {
			height: 100%;
			width: 100%;
			border-radius: 50%;
		}
	}

	.edit {
		width: 24rpx;
		height: 24rpx;
		margin-left: 15rpx;
	}

	.name {
		display: flex;
		align-items: center;
		align-items: center;

		.name_text {
			font-weight: bold;
			font-size: 32rpx;
			color: #333333;
		}
	}

	.info {
		padding-left: 20rpx;
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;

		.tagBox {
			width: 100%;
			display: flex;

			.tagCell {
				padding: 8rpx 16rpx;
				background-color: #FC6701;
				font-size: 20rpx;
				color: #FFFFFF;
				border-radius: 12rpx;
			}

		}

		.info_btn {
			.btn_cell {
				padding: 12rpx 30rpx;
				background-color: #ffffff;
				border-radius: 30rpx;
				font-weight: 500;
				font-size: 24rpx;
				color: #333333;
				display: flex;
				align-items: center;

				image {
					width: 32rpx;
					height: 32rpx;
					margin: 0 8rpx 0 0;
				}
			}
		}

		.info_box {
			flex: 1;
			display: flex;
			align-items: center;
			margin-right: 10rpx;

			.taglist {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
			}

			.tag {
				border-radius: 50rpx;
				color: #111;
				font-size: 22rpx;
				padding: 4rpx 12rpx;
				margin-right: 10rpx;
				margin-bottom: 10rpx;
				border: 2rpx solid #999999;
			}
		}

		.info_icon {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.icon_ {
				padding: 10rpx;
				width: 50rpx;
				height: 50rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 90%;
					height: 90%;
				}
			}
		}
	}
}

.myOrderBox {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	background-color: #fff;
	border-radius: 16rpx;
	width: 702rpx;
	height: 224rpx;
	margin: 20rpx 24rpx;
	position: relative;

	.myOrderHead {
		display: flex;
		justify-content: space-between;
		width: 100%;
		font-size: 32rpx;
		padding: 0 30rpx;

		.myOrderTitle {
			font-weight: bold;
		}

		.setAddress {
			color: #ff6030;
			font-size: 24rpx;
		}
	}

	.myOrderItem {
		display: flex;
		width: 100%;

		.myOrderInfo {
			position: relative;
			text-align: center;
			width: 25%;

			.myuseimg {
				width: 56rpx;
				height: 56rpx;
			}

			.usetext {
				font-size: 24rpx;
				color: #333333;
			}
		}
	}
}

.nav_list {
	margin-top: 100rpx;

	.nav_main {
		border-radius: 8rpx;
		overflow: hidden;
		width: 702rpx;
		margin: 0 24rpx;
		margin-bottom: 20rpx;
	}

	.nav_item {
		height: 110rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		padding: 0rpx 24rpx;
		background-color: #fff;
		position: relative;

		.nav_box {
			display: flex;
			align-items: center;
			flex: 1;
			position: relative;

			.diyMargin {
				right: 0;
				top: 50%;
				transform: translateY(-50%);
			}

			.nav_item_icon {
				width: 48rpx;
				height: 48rpx;
				margin-right: 24rpx;
			}

			.nav_img {
				width: 56rpx;
				height: 56rpx;
				margin: 0 20rpx 0 5rpx;
			}

			.nav_text {
				font-size: 28rpx;
				color: #333333;
			}

			.diyInvite {
				position: relative;

				&::after {
					content: '赚挥豆';
					position: absolute;
					right: -110rpx;
					top: -10rpx;
					background-color: #fc201c;
					font-size: 22rpx;
					color: white;
					padding: 5rpx 15rpx;
					border-radius: 25rpx 25rpx 25rpx 0;
				}
			}
		}

		.rimg {
			width: 32rpx;
			height: 32rpx;
		}

		&::after {
			position: absolute;
			bottom: 0;
			right: 0;
			left: 0;
			height: 2rpx;
			content: '';
			transform: scaleY(0.6);
			// background-color: #404040;
		}

		.new_ad {
			color: #ffff00;
		}

		.con {
			flex: 1;
			// padding-left: 12rpx;
		}

		.icon {
			height: 40rpx;
			width: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.unReadNum {
		max-width: 48rpx;
		min-width: 32rpx;
		height: 32rpx;
		position: absolute;
		right: 70rpx;
		top: 50%;
		transform: translate(0, -50%);
		font-size: 22rpx;
		background-color: #fc201c;
		color: white;
		padding: 5rpx;
		border-radius: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}

.mt40 {
	margin-top: 40rpx;
}

.unReadNum {
	max-width: 48rpx;
	min-width: 32rpx;
	height: 32rpx;
	position: absolute;
	right: 20rpx;
	top: -10rpx;
	font-size: 22rpx;
	background-color: #fc201c;
	color: white;
	padding: 5rpx;
	border-radius: 30rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}

.page_top {
	position: fixed;
	top: 0;
	left: 0;
	width: 750rpx;
	box-sizing: border-box;
	background: transparent;
	z-index: 9999;

	.tabs {
		height: 48px;
		display: flex;
		font-size: 32rpx;
		align-items: center;
		justify-content: center;
		font-weight: bold;

		image {
			width: 52rpx;
			height: 52rpx;
		}
	}
}

.bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 40vh;
	z-index: -1;

	image {
		width: 100%;
		height: 100%;
	}
}

.tips {
	position: fixed;
	left: 50%;
	bottom: 40rpx;
	transform: translate(-50%, 0);
	font-size: 26rpx;
	color: #999999;
	text-align: center;

	text {
		margin-left: 10rpx;
		font-size: 26rpx;
		color: #55aaff;
	}
}
</style>